<template name="goods-item">
    <view class="goods" @click="$u.route({
        url: 'pages/productDetail/index',
        params: {
            productId: product.id
        }
    })">
        <image
            :src="product.mainImg"
            class="main-img"
            mode="aspectFill"
        ></image>
        <view class="goods-info">
            <u-text
                :text="product.name"
                color="#282828"
                size="28rpx"
                :lines="1"
            ></u-text>
            <view class="goods-detail">
                <view class="goods-point">
                    <u-text
                        :text="product.price"
                        size="36rpx"
                        color="#356CE7"
                        bold
                        prefixIcon="rmb"
                        iconStyle="font-size: 22rpx; color: #356CE7; font-weight: bold;top: 10rpx;"
                    ></u-text>
                    <!--view class="goods-point-value">{{ product.price }}</view>
                    <view class="goods-point-utils">积分</view-->
                </view>
                <u-text
                    :text="'月兑' + product.sales"
                    size="24rpx"
                    color="#B6B6B6"
                    align="rights"
                ></u-text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "goods-item",
        props: {
            product: {
                type: Object,
                default: () => {}
            }
        }
    }
</script>

<style lang="scss" scoped>
    .goods {
        background: #FFFFFF;
        .main-img {
            display: block;
            width: 100%;
            height: 344rpx;
        }
        .goods-info {
            margin-top: 20rpx;
            padding: 0 14rpx 29rpx 14rpx;
            .goods-detail {
                display: flex;
                justify-content: space-between;
                .goods-point {
                    display: flex;
                    margin-top: 15rpx;
                    .goods-point-value {
                        font-size: 36rpx;
                        font-family: DINAlternate-Bold, DINAlternate;
                        font-weight: bold;
                        color: #356CE7;
                        margin-right: 8rpx;
                    }
                    .goods-point-utils {
                        font-size: 24rpx;
                        font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                        font-weight: 400;
                        color: #356CE7;
                    }
                }
            }
        }
    }
</style>
